<template>
  <div style="padding:20px;">
    <span>请选择表单：</span>
    <el-select
      ref="select"
      v-model="data.id"
      remote 
      filterable 
      clearable 
      placeholder="请输入表单关键词"
      :filter-method="getFormAsync"
      @change="handleSelectForm">
      <el-option v-for="item,n in formList.list" :value="item.formId" :label="item.title" :key="n.toString()"></el-option>
    </el-select>
  </div>
</template>
<script>
  import {mapActions, mapState, mapMutations} from 'vuex'
  export default{
    props: ['data'],
    mounted () {
      this.init()
    },
    computed: {
      ...mapState({
        formList: state => state.contentManage.formList,
        formDetail: state => state.contentManage.formDetail
      })
    },
    methods: {
      ...mapActions(['getFormList', 'getFormDetail2']),
      ...mapMutations(['SET_FORM_LIST']),
      async init () {
        this.SET_FORM_LIST([])
        if (this.data.id) {
          await this.getFormDetail2(this.data.id)
          if (!this.formDetail.title) {
            this.data.id = null
          } else {
            this.SET_FORM_LIST({list: [{formId: this.data.id, title: this.formDetail.title}]})
          }
        }
        this.getFormList({
          title: '',
          publishStatus: 1,
          page: 1,
          size: 10
        })
      },
      async handleSelectForm () {
        const form = this.formList.list.filter(item => item.formId === this.data.id)[0]
        if (form) {
          this.$emit('select', form.formId)
        }
      },
      getFormAsync (query) {
        if (query) {
          this.loading = true
          this.getFormList({
            title: query,
            publishStatus: 1,
            page: 1,
            size: 10
          })
        }
      }
    }
  }
</script>
